<template>
  <div class="goodsDrawerView" @scroll="scrollEvent">
    <el-drawer title="筛选" :visible.sync="screenShow" direction="rtl" custom-class="screenDrawerCont" :size="'460px'"
               append-to-body>
      <div class="screenDrawer">
        <div class="text">价格区间（元）</div>
        <div class="inputBox">
          <input type="text" placeholder="最低价" v-model="minPrice" oninput="value=value.replace(/\D/g,'')">
          <i class="iconfont el-icon-minus"></i>
          <input type="text" placeholder="最高价" v-model="maxPrice" oninput="value=value.replace(/\D/g,'')">
        </div>
        <div class="text">
          <div>品牌</div>
          <div @click="brandShow=true" class="more"><span>更多品牌</span><i class="iconfont el-icon-arrow-right"></i></div>
        </div>
        <div class="screenBox">
          <div class="btn" :class="store_id.indexOf(item.store_id)!==-1?'active':''"
               @click="changeStoreId(item.store_id)" v-for="(item,index) in brandLstData.data.pushStore" :key="index"
               v-if="index<15">
            {{ item.store_name }}
          </div>
        </div>
        <div class="text">
          <div>品类</div>
<!--          <div class="more" @click="cateShow=true"><span>更多</span><i class="iconfont el-icon-arrow-right"></i></div>-->
        </div>
        <div class="screenBox">
          <div class="btn" :class="cateOne_id.indexOf(item.cate_id)!==-1?'active':''"
               v-if="item.is_show"
               @click="changeCateOne_id(item.cate_id)" v-for="(item,index) in cateLstData.data">
            {{ item.cate_name }}
          </div>
        </div>
        <div class="btnBox">
          <div class="b1" @click="resetData()">重置</div>
          <div class="b2" @click="confirmData()">确认</div>
        </div>
      </div>
      <el-drawer title="全部品牌" :visible.sync="brandShow" direction="rtl" custom-class="brandDrawerCont" :size="'375px'"
                 append-to-body>
        <div class="brandDrawerBody">
          <div class="letterBox">
            <div @click="changeScroll(letter)" v-for="letter in sortListData">{{ letter }}</div>
          </div>
          <div class="brandListBox">
            <div class="brandList" :id="`letter${letter}`" v-for="letter in sortListData">
              <div class="letter">{{ letter }}</div>
              <div class="brandBox" @click="changeStoreId(item.store_id)" v-for="item in brandLstData.data.LstStore"
                   v-if="item.sort===letter">
                <div class="icon" :class="store_id.indexOf(item.store_id)!==-1?'active':''">√</div>
                <img :src="item.store_logo" alt="">
                <span>{{ item.store_name }}</span>
              </div>
            </div>
          </div>
          <div class="brandBtnBox">
            <div class="b1" @click="store_id = []">重置</div>
            <div class="b2" @click="brandShow=false">确认</div>
          </div>

        </div>
      </el-drawer>
<!--      <el-drawer title="全部品类" :visible.sync="cateShow" direction="rtl" custom-class="brandDrawerCont" :size="'375px'"-->
<!--                 append-to-body>-->
<!--        <div class="brandDrawerBody">-->
<!--          <div class="brandListBox">-->
<!--            <div class="brandList">-->
<!--              <div class="brandBox" @click="changeCateOne_id(item.cate_id)" v-for="(item,index) in cateLstData.data">-->
<!--                <div class="icon" :class="cateOne_id.indexOf(item.cate_id)!==-1?'active':''">√</div>-->
<!--                <img :src="item.cate_logo" alt="">-->
<!--                <span>{{ item.cate_name }}</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="brandBtnBox">-->
<!--            <div class="b1" @click="cateOne_id = []">重置</div>-->
<!--            <div class="b2" @click="cateShow=false">确认</div>-->
<!--          </div>-->

<!--        </div>-->
<!--      </el-drawer>-->
    </el-drawer>
    <div class="searchBox">
      <i class="iconfont el-icon-close close" @click="$emit('closeDrawer','goodsPopupShow')"></i>
      <div class="search">
        <i class="iconfont el-icon-search" @click="getGoods()"></i>
        <input v-model="keyword" @keyup.enter="getGoods()" placeholder="搜索品牌或商品名称"/>
      </div>
    </div>
    <div class="selectBox">
      <el-select v-model="priceData.val" @change="changeSale()" placeholder="综合">
        <el-option
            v-for="item in priceData.list"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <div @click="changeSale(true)" :class="{'active':order_sale}">销量</div>
      <div class="screen" @click="screenShow=true"><span>筛选</span><i class="el-icon-s-unfold iconfont"></i></div>
    </div>
    <status-text :status="goodsData.status"></status-text>
    <div class="listBox" v-for="(item,idx) in goodsData.data" v-if="goodsData.data.length>0">
      <img class="leftImg" :src="item.main_imgurl">
      <div class="box">
        <div class="d1">{{ item.product_title }}</div>
        <div class="d2">
          <span>{{ item.cate_name }}</span>
        </div>
        <div class="d3">
          <p class="pl">{{ item.volume }}人付款</p>
          <p class="pr"><span class="sp1">¥{{ item.primary_price }}</span><span class="sp2">¥{{ item.price }}</span></p>
        </div>
      </div>
      <div class="btn" @click="$emit('sendPopupMsg',item,'goods');$emit('close')">
        <img src="../../assets/images/send.png" alt="">
        <img src="../../assets/images/send1.png" alt="">
      </div>
    </div>
    <status-text :status="4" v-if="goodsData.noMore"></status-text>
  </div>
</template>

<script>

import StatusText from "../common/statusText";

export default {
  components: {StatusText},
  data() {
    return {
      order_sale:false,
      screenShow: false,
      brandShow: false,
      cateShow: false,
      keyword: '',
      priceData: {
        list: [{
          value: 'mix',
          label: '综合排序'
        },  {
          value: 'parced',
          label: '价格降序'
        }, {
          value: 'price',
          label: '价格升序'
        }],
        val: ''
      },
      brandLstData: {
        status: 1,
        data: {},
      },
      cateLstData: {
        status: 1,
        data: [],
      },
      minPrice: '',
      maxPrice: '',
      store_id: [],//品牌ID
      cateOne_id: [],//品牌ID
      sortListData: [],
      goodsData: {
        store_id: [],
        cateOne_id: [],
        minPrice: '',
        maxPrice: '',
        loading: false,
        noMore: false,
        status: 1,
        data: [],
        page: 1,
        pagesize: 10,
        total: ''
      },
    }
  },
  mounted() {
    this.getBrandLst();
    this.getCateLst();
    this.getGoods()
  },
  methods: {
    changeSale(type=false){
      if(type){
        this.priceData.val='';
        this.order_sale=true;
        this.goodsData.page = 1;
        this.getGoods();
      }else {
        this.order_sale=false;
        this.confirmData()
      }

    },
    changeScroll(letter) {
      let num = document.getElementById('letter' + letter).offsetTop
      document.getElementsByClassName('brandListBox')[0].scrollTop = num
    },
    scrollEvent(e) {
      if (this.goodsData.noMore) {
        return false;
      }
      let windowHeight = e.target.clientHeight;
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight) {
        this.goodsData.page++
        this.getGoods(true);
      }
    },
    changeStoreId(id) {
      let num = this.store_id.indexOf(id)
      if (num !== -1) {
        this.store_id.splice(num, 1)
      } else {
        this.store_id.push(id)
      }
    },
    changeCateOne_id(id) {
      let num = this.cateOne_id.indexOf(id)
      if (num !== -1) {
        this.cateOne_id.splice(num, 1)
      } else {
        this.cateOne_id.push(id)
      }
    },
    confirmData() {
      this.goodsData.minPrice = this.minPrice;
      this.goodsData.maxPrice = this.maxPrice;
      this.goodsData.store_id = this.store_id;
      this.goodsData.cateOne_id = this.cateOne_id;
      this.goodsData.page = 1;
      this.getGoods();
      this.screenShow = false;
    },
    resetData() {
      this.minPrice = '';
      this.maxPrice = '';
      this.store_id = [];
      this.cateOne_id = [];
      this.goodsData.minPrice = this.minPrice;
      this.goodsData.maxPrice = this.maxPrice;
      this.goodsData.store_id = this.store_id;
      this.goodsData.cateOne_id = this.cateOne_id;
      this.goodsData.page = 1;
    },
    getBrandLst() {
      this.$http.get('api/manager/shop/home/brandLst').then(res => {
        if (res.code === 1) {
          this.brandLstData.data = res.data;
          this.brandLstData.data.LstStore.map((item, index) => {
            if (!this.sortListData.includes(item.sort)) {
              this.sortListData.push(item.sort)

            }
          })
          this.brandLstData.status = 2
        } else {
          this.brandLstData.status = 3
          this.$message(res.msg)
        }
      }).catch(err => {
        this.brandLstData.status = 3
        this.$message(err.msg ? err.msg : err.toString())
      })
    },
    getCateLst() {
      this.$http.get('api/manager/shop/home/cateLst').then(res => {
        if (res.code === 1) {
          this.cateLstData.data=res.data.cateLst;
          // res.data.cateLst.map(item => {
          //   // item.child.map(cate => {
          //   //   this.cateLstData.data.push(cate)
          //   // })
          //   for (let index in item.child){
          //     this.cateLstData.data.push(item.child[index])
          //   }
          // })
          this.cateLstData.status = 2
        } else {
          this.cateLstData.status = 3
          this.$message(res.msg)
        }
      }).catch(err => {
        this.cateLstData.status = 3
        this.$message(err.msg ? err.msg : err.toString())
      })
    },
    getGoods(paging) {
      if(!paging){
        this.goodsData.page=1
      }
      this.$http.post('/api/root/KefuShop/product', {
        keyword: this.keyword,
        order_type:this.order_sale?'sale': this.priceData.val,
        minPrice: this.goodsData.minPrice,
        maxPrice: this.goodsData.maxPrice,
        store_id_lst: this.goodsData.store_id.join(','),
        cate_id_lst: this.goodsData.cateOne_id.join(','),
        page: this.goodsData.page,
        pagesize: this.goodsData.pagesize
      }).then(res => {
        if (res.code === 1) {
          if (this.goodsData.page * this.goodsData.pagesize >= res.data.count) {
            this.goodsData.noMore = true;
          }else {
            this.goodsData.noMore = false;
          }
          if (paging) {
            res.data.data.map(item => {
              this.goodsData.data.push(item);
            });
          } else {
            this.goodsData.data = res.data.data
          }
          this.goodsData.status = 2;
        } else {
          this.goodsData.status = 3;
          this.$message(res.msg)
        }
      }).catch(err => {
        this.goodsData = 3;
        this.goodsData.status = 3;
        this.$message(err.msg ? err.msg : err.toString())
      })
    },
  }
}
</script>
<style lang="less">
.brandDrawerCont {
  .el-drawer__header {
    margin-bottom: 20px;
    padding: 20px 22px 0 12px;
  }

  .brandDrawerBody {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .brandListBox {
      flex: 1;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    .brandBtnBox {
      width: 100%;
      display: flex;
      line-height: 36px;
      text-align: center;
      margin: 25px 0;

      .b1 {
        flex: 1;
        float: left;
        color: #505050;
        background: #F5F5F5;
        border-radius: 4px;
        margin: 0 12px;
      }

      .b2 {
        margin-right: 20px;
        flex: 1;
        color: #fff;
        float: right;
        height: 36px;
        background: #C3AB7C;
        border-radius: 4px;
      }
    }

    .letterBox {
      width: 10px;
      height: 100%;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      color: #000000;
      position: fixed;
      right: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      div {
        &:last-child {
          margin-bottom: 200px;
        }

        line-height: 25px;
        cursor: pointer;
      }
    }

    .brandList {
      width: 330px;

      .letter {
        height: 35px;
        line-height: 35px;
        text-indent: 12px;
        background: #F8F8F8;
        color: #0A0605;
        font-weight: 500;
        font-size: 14px;
      }

      .brandBox {
        display: flex;
        align-items: center;
        height: 72px;
        border-bottom: 1px solid #F5F5F5;

        .icon {
          &.active {
            background: #C3AB7C;
          }

          margin: 0 12px;
          width: 18px;
          height: 18px;
          line-height: 18px;
          font-size: 12px;
          text-align: center;
          background: #FFFFFF;
          color: #fff;
          border: 1px solid #D8D8D8;
          border-radius: 50%;
        }

        img {
          width: 42px;
          height: 42px;
          margin-right: 12px;
        }

        span {
          font-weight: 400;
          font-size: 13px;
          color: #0A0605;
        }
      }
    }
  }
}


.screenDrawerCont {
  .el-drawer__header {
    margin-bottom: 0;
    padding: 20px 50px 0;
  }

  .screenDrawer {
    width: 360px;
    height: 100%;
    margin: auto;

    .text {
      height: 50px;
      color: #1A1C20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 400;

      .more {
        cursor: pointer;
      }
    }

    .inputBox {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      color: #939393;
      font-size: 14px;

      input {
        outline: none;
        border: none;
        text-align: center;
        background: #F5F5F5;
        border-radius: 4px;
        width: 126px;
        height: 100%;
      }
    }

    .screenBox {
      display: flex;
      flex-wrap: wrap;

      .btn {
        &.active {
          border: 1px solid #C3AB7C;
          color: #C3AB7C;
        }

        &:nth-child(3n+2) {
          margin-left: 10px;
          margin-right: 10px;
        }

        cursor: pointer;
        margin-bottom: 8px;
        width: 113px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F5F5F5;
        border: 1px solid #F5F5F5;
        border-radius: 2px;
        color: #1A1C20;
        font-size: 12px;
        text-align: center;
      }
    }

    .btnBox {
      margin-top: 50px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      line-height: 36px;

      .b1 {
        float: left;
        color: #505050;
        width: 140px;
        background: #F5F5F5;
        opacity: 1;
        border-radius: 4px;
      }

      .b2 {
        color: #fff;
        float: right;
        width: 203px;
        height: 36px;
        background: #C3AB7C;
        opacity: 1;
        border-radius: 4px;
      }
    }
  }
}

.goodsDrawerView {
  padding: 0 30px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .searchBox {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .close {
      margin: 0 40px 0 7px;
      font-size: 24px;
      font-weight: 400;
      color: #0A0605;
    }

    .search {
      overflow: hidden;
      width: 446px;
      height: 33px;
      background: #F8F8F8;
      border-radius: 17px;
      display: flex;
      align-items: center;
      color: #939393;

      i {
        font-weight: 400;
        margin: 0 14px;
        font-size: 15px;
      }

      input {
        background: #F8F8F8;
        border: none;
        height: 100%;
        width: 100%;
        outline-style: none;
        font-size: 13px;
      }
    }
  }

  .selectBox {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    .active{
      color: #A98F68;
    }
    .el-input__inner {
      color: #939393;
      border: none;
    }

    .screen {
      margin-left: 125px;
      cursor: pointer;

      i {
        margin-left: 3px;
      }
    }

    div {
      cursor:pointer;
      font-size: 14px;
      font-weight: 400;
      color: #939393;
    }

    .el-select {
      width: 120px;
    }
  }

  .listBox {
    height: 106px;
    display: flex;
    margin-bottom: 22px;
    justify-content: space-between;

    .leftImg {
      width: 106px;
      height: 106px;
      border-radius: 4px;
    }

    .box {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 20px;

      .d1 {
        height: 48px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .d2 {
        color: #939393;
        font-size: 13px;
        margin-top: 10px;
        line-height: 18px;
        font-weight: 400;

        i {
          margin: 0 8px;
          border-left: 1px #939393 solid;
        }
      }

      .d3 {
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 32px;

        .pl {
          color: #939393;
          font-size: 13px;
        }

        .pr {
          .sp1 {
            color: #939393;
            font-size: 13px;
            text-decoration: line-through;
          }

          .sp2 {

            color: #E5675A;
            font-size: 18px;
            font-weight: 600;
            margin-left: 5px;
          }
        }
      }
    }

    .btn {
      width: 38px;
      height: 106px;
      background: #F9F6F3;
      border: 1px solid #C3AB7C;
      opacity: 1;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 30px;

      img {
        margin: 3px 0;
      }
    }
  }
}
</style>
